<template>
  <div>
    <div class="condition">
      <div class="condition-text" v-for="(item,index) in conditions" :key="index" @click="onChange(item,index)"
           v-bind:class="{back:index==isActive,change_back:index!=isLine}">
        <span>{{ item }}</span>
      </div>
      <Icon type="ios-refresh" size="25" style="float:right; cursor: pointer; margin-left: 10px;" @click.native="refresh"/>
    </div>
    <div class="total"><p>合计:<span>{{ defectCount }}</span></p></div>
    <div class="progress-list" v-if="processDataList != undefined && processDataList != null && processDataList.length > 0 ">
      <div :key="item.name"
           class="item"
           v-for="item in processDataList">
        <p>
          <!-- <i :style="{background:item.color}"></i> -->
          {{ item.name }}
        </p>
        <Progress :percent="item.percent"
                  :stroke-color="item.color"
                  :stroke-width="10"
                  class="progress"
                  hide-info
                  status="active"/>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {statApi} from '@/api/stat';

export default {
  data() {
    return {
      isActive: false,
      isLine: false,
      defectCount: null,
      processDataList:[],
      conditions: [
        '近7天', '近30天', '近一年'
      ]
    }
  },
  props: {
    value: Array
  },
  mounted() {
    this.getDefectTOPs();
  },
  methods: {
    onChange(item, index) {
      this.isActive = index;
      this.isLine = index;
      let timeType = 0;
      switch (index) {
        case 0:
          timeType = 1;
          break;
        case 1:
          timeType = 2;
          break;
        case 2:
          timeType = 3;
          break;
      }
      this.getDefectTOPs(timeType);
    },
    async getDefectTOPs(timeType) {
      try {
        let params = {
          dateType: timeType
        }
        statApi.countTop5DefectType(params).then(res => {
          if (res.code === 1) {
            this.defectCount = res.data.defectCount;
            this.processDataList = res.data.processDataList;
            console.log(this.processDataList);
          }
        })
      } catch (e) {
        console.error(e);
      } finally {
      }
    },
    refresh() {
      this.getDefectTOPs();
    }
  }
};
</script>

<style lang="less">
.total {
  text-align: right;
  bottom: 0;
  position: relative;
  p{
    font-size:20px;
    span {
      color: dodgerblue;
      font-weight: 700;
      margin-right: 20px;
      font-size: 25px;
    }
  }
}

.progress-list {
  margin-top: 20px;
  margin-left: 5px;
  line-height: 35px;

  .item {
    width: 100%;
    display: flex;
    font-size: 16px;
    color: #595959;
    margin-bottom: 16px;

    span {
      color: #808080;
      margin: 0px 10px 0px 15px;
    }

    p {
      i {
        display: inline-block;
        border-radius: 5px;
        width: 10px;
        height: 10px;
        margin-right: 13px;
        background: #f66;
      }
    }

    .progress {
      flex: 1;
      margin-left: 5px;
    }
  }
}
</style>
